<script setup>
import { Codemirror } from 'vue-codemirror'
import { python } from '@codemirror/lang-python'
import { oneDark } from '@codemirror/theme-one-dark'
import { ref } from 'vue'
import { useCodeStore } from '@/stores/index.js'

const codeStore = useCodeStore()

const CoderStyle = ref({
  'min-height': '1300px',
  width: '100%',
  'font-size': '18px',
  outline: 'none'
})
// const myOptions = ref({
//   tabSize: 4,
//   indentUnit: 4,
//   readOnly: true
// })
const extensions = [python(), oneDark]
</script>

<template>
  <div>
    <codemirror
      v-model="codeStore.userCode"
      :style="CoderStyle"
      :extensions="extensions"
      @dragover.prevent
      @drag="event.preventDefault()"
    >
    </codemirror>
  </div>
</template>

<style lang="less" scoped>
:deep(.cm-activeLine) {
  font-family: 'monospace';
}

:deep(.cm-line) {
  font-family: 'monospace';
}
</style>
